<template>
	<div class="globally">
		<div
			class="box-shadow bg-white relative scaleDraw border-radius"
			:style="{ height: mould.height + 'px', width: mould.width + 'px' }"
			@click="$store.commit('selectComponent')"
			@drop.prevent="drop($event)"
			@dragover.prevent=""
		>
			<ctext
				v-if="item.type == 'text'"
				v-for="(item, index) in $store.state.componentList"
				:option="item"
				:index="index"
				:height="mould.height"
				:width="mould.width"
				:key="index"
				:drag="selectedIndex == index"
				@click.native.stop=""
				@mousedown.native="$store.commit('selectComponent', index)"
			/>
		</div>
	</div>
</template>

<script>
export default {
	name: 'mould',
	data() {
		return {
			mould: this.$store.getters.mould,
			selectedIndex: this.$store.getters.selectedIndex
		};
	},
	watch: {
		'$store.state.selectedIndex'(e) {
			this.selectedIndex = e;
		}
	},
	created() {
		document.addEventListener('keyup', e => {
			if (this.selectedIndex > 0 || this.selectedIndex == 0) {
				if (e && (e.keyCode == 8 || e.keyCode == 46)) {
					this.$confirm('此操作将该组件从模板上移除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$store.commit('deleteComponentList');
						this.$message({
							type: 'success',
							message: '组件移除成功!'
						});
					});
				}
				if(e && e.keyCode == 13) {
					this.$store.commit('selectComponent');
				}
			}
		});
	},
	methods: {
		// 获取拖动组件的参数
		drop(event) {
			var type = event.dataTransfer.getData('Components'),
				x = event.offsetX,
				y = event.offsetY;
			this.$store.commit('createComponentList', { type, x, y });
		}
	}
};
</script>

<style scoped>
.bts {
	animation: bt 1s 1;
	height: 50px;
	border-radius: 30px;
	width: 150px;
}
.bg-gray {
	background-color: #a8a8a8;
}
.border-radius {
	border-radius: 30px;
}
.box-shadow {
	box-shadow: 10px 10px 0px 0px rgba(145, 145, 145, 0.3);
}
</style>
